
<template>
  <div class="chart-card">
    <h3>资产状态占比统计</h3>
    <div class="chart-container">
      <!-- 环形图 -->
      <div ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { getAssetStatusData } from "@/api/Chart";

const chartRef = ref(null);
let chartInstance: echarts.ECharts | null = null;

// 资产分类数据源，包含分类名称和对应数量
const assetData = [];

onMounted(async () => {
  try {
    const res = await getAssetStatusData();
    // 将接口返回的字符串数值转换为数字
    const formattedData = res.data.map((item) => ({
      name: item.status,
      value: Number(item.count), // 将字符串转为数值
    }));
    if (chartRef.value) {
      chartInstance = echarts.init(chartRef.value); // 确保 DOM 元素已挂载

      // ECharts配置项
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} 台 ({d}%)", // 添加单位提示
        },
        legend: {
          orient: "vertical",
          left: "80%",
          top: "center",
          data: formattedData.map((item) => item.name), // 使用动态数据
          textStyle: {
            color: "#666",
            fontSize: 16, // 适当调整字体大小
          },
        },
        series: [
          {
            center: ["35%", "50%"],
            name: "部门资产",
            type: "pie",
            radius: ["50%", "70%"],
            data: formattedData, // 使用动态数据
            label: {
              show: false, // 隐藏每个扇区的标签文字
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
          },
        ],
      };

      chartInstance.setOption(option);
    }
  } catch (error) {
    console.error("获取数据失败:", error);
  }
});
</script>

<style scoped>
.chart-card {
  width: 100%;
  max-width: 680px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 15px auto;
}

.chart-card h3 {
  font-size: 18px;
  font-weight: bold;
  padding-left: 16px;
  text-align: left;
}

.chart-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.chart {
  width: 100%;
  height: 520px;
}
</style>

